<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>关于HTML</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<!--[if lte IE 8]>
<p class="browserupgrade">您的浏览器版本太老了, 请到 <a href="http://browsehappy.com/">这里</a> 更新, 以获取最佳的体验</p>
<![endif]-->

<header>
    <nav class="main">
        <a href="index.html" class="brand"><img src="img/logo-gougou.png" alt="回到首页"></a>
        <ul>
            <li><a href="HTML.html">HTML</a></li>
            <li><a href="CSS.html">CSS</a></li>
            <li><a href="JS.html">JS</a></li>
            <li><a href="Node.html">Node</a></li>
            <li><a href="fun.html">有趣</a></li>
            <li><a href="Me.html">Me</a></li>
        </ul>
    </nav>
</header>

<div class="container">
    <section class="sec">
        <div class="mainLeft">
            <!--            <a class="bowen">
                            <div class="bowenImg">
                                <img src="img/480-250-1.png"/>
                            </div>
                            <span class="title ">这是一行字是标题</span>
                            <p class="shortword">这是一段简介</p>
                            <div class="tools">
                                <span class="see"><i></i></span>
                                <span class="like"><i></i></span>
                                <span class="time"><i></i></span>
                            </div>
                        </a>-->
            <!--            <a class="bowen">
                            <div class="bowenImg">
                                <img src="img/480-250-1.png"/>
                            </div>
                            <span class="title ">这是一行字是标题</span>
                            <p class="shortword">这是一段简介</p>
                            <div class="tools">
                                <span class="see icon-users"><i>100</i></span>
                                <span class="like icon-happy2"><i>100</i></span>
                                <span class="time icon-table"><i>2016.11.19</i></span>
                            </div>
                        </a>-->
        </div>
        <div class="mainRight">
            <div class="rightBox" id="userInfo">
                <div class="title"><span>用户信息</span></div>
                <p><span class="colDark"></span></p>

                <p><span class="colDanger">你好，欢迎光临我的博客！</span></p>

            </div>
            <div class="rightBox" id="loginBox" style="display: block;">
                <div class="title"><span>登录</span></div>
                <div class="line"><span class="colDark">用户名：</span><input name="username" type="text"><em></em></div>
                <div class="line"><span class="colDark">密码：</span><input name="password" type="password"><em></em></div>
                <div class="line"><span class="colDark"></span><button>登 录</button></div>
                <p class="textRight">还没注册？<a href="javascript:;" class="colMint">马上注册</a>　</p>
                <p class="colWarning textCenter"></p>
            </div>

            <div class="rightBox" id="registerBox" style="display: none;">
                <div class="title"><span>注册</span></div>
                <div class="line"><span class="colDark">用户名：</span><input name="username" type="text"></div>
                <div class="line"><span class="colDark">密码：</span><input name="password" type="password"></div>
                <div class="line"><span class="colDark">确认：</span><input name="repassword" type="password"></div>
                <div class="line"><span class="colDark"></span><button>注 册</button></div>
                <p class="textRight">已有账号？<a href="javascript:;" class="colMint">马上登录</a>　</p>
                <p class="colWarning textCenter"></p>
            </div>
        </div>
    </section>
</div>

<script src="js/vendor/jquery.min.js"></script>
<script>
    $(function () {
        var $userInfo = $('#userInfo');
        var $loginBox = $('#loginBox');
        if (sessionStorage.getItem ('username') != null)
        {
            var username = sessionStorage.getItem('username');
            //$('.colWarning').html(username);
            $userInfo.show();
            $loginBox.hide();
            $userInfo.find('.title > span').html(username);
        }
        else
        {
            $userInfo.hide();
        }
    });
</script>
<script src="js/css.js"></script>
</body>
</html>